<template>
    <div class="app-container dark-mode">
      <el-table
        :data="tableData"
        style="width: 100%"
        @row-click="handleRowClick"
        :row-style="{ cursor: 'pointer' }"
        class="dark-table"
      >
        <el-table-column
          prop="id"
          label="供热站ID"
          width="180"
        />
        <el-table-column
          prop="name"
          label="供热站名称"
          width="180"
        />
        <el-table-column
          prop="location"
          label="位置"
        />
        <el-table-column
          prop="status"
          label="状态"
          :filters="[{ text: '运行中', value: '运行中' }, { text: '维护中', value: '维护中' }, { text: '已停用', value: '已停用' }]"
          :filter-method="filterStatus"
        >
          <template #default="scope">
            <el-tag :type="getStatusType(scope.row.status)" dark>
              {{ scope.row.status }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          prop="energyConsumption"
          label="当前能耗(kWh)"
          sortable
        />
        <el-table-column
          prop="waterConsumption"
          label="当前水耗(吨)"
          sortable
        />
        <el-table-column
          prop="pressure"
          label="当前压力(MPa)"
          sortable
        />
      </el-table>
    </div>
  </template>
  
  <script>
  export default {
    name: "HeatStationControl",
    data() {
      return {
        tableData: [
          {
            id: "HS001",
            name: "城东供热站",
            location: "城东区解放路88号",
            status: "运行中",
            energyConsumption: 1250.5,
            waterConsumption: 85.2,
            pressure: 0.76
          },
          {
            id: "HS002",
            name: "城南供热站",
            location: "城南区中山路156号",
            status: "维护中",
            energyConsumption: 0,
            waterConsumption: 0,
            pressure: 0
          },
          {
            id: "HS003",
            name: "城西供热站",
            location: "城西区人民路32号",
            status: "运行中",
            energyConsumption: 1180.3,
            waterConsumption: 78.5,
            pressure: 0.72
          },
          {
            id: "HS004",
            name: "城北供热站",
            location: "城北区建设路99号",
            status: "运行中",
            energyConsumption: 1320.7,
            waterConsumption: 92.1,
            pressure: 0.68
          },
          {
            id: "HS005",
            name: "中央供热站",
            location: "中心区广场路1号",
            status: "已停用",
            energyConsumption: 0,
            waterConsumption: 0,
            pressure: 0
          },
          {
            id: "HS006",
            name: "开发区供热站",
            location: "高新技术开发区科技路8号",
            status: "运行中",
            energyConsumption: 1425.8,
            waterConsumption: 95.3,
            pressure: 0.79
          },
          {
            id: "HS007",
            name: "新区供热站",
            location: "新区创新大道66号",
            status: "运行中",
            energyConsumption: 1105.2,
            waterConsumption: 72.4,
            pressure: 0.71
          },
          {
            id: "HS008",
            name: "老城区供热站",
            location: "老城区传统路33号",
            status: "运行中",
            energyConsumption: 1280.6,
            waterConsumption: 88.7,
            pressure: 0.74
          }
        ]
      };
    },
    methods: {
      handleRowClick(row) {
        // 创建虚拟链接下载文件
        const link = document.createElement('a');
        link.href = '/download.pdf'; // 确保项目public目录下有这个文件
        link.download = `${row.name}_供热站信息.pdf`; // 使用供热站名称作为文件名
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
        
        this.$message.success(`正在下载 ${row.name} 的信息文件`);
      },
      filterStatus(value, row) {
        return row.status === value;
      },
      getStatusType(status) {
        switch (status) {
          case "运行中":
            return "success";
          case "维护中":
            return "warning";
          case "已停用":
            return "danger";
          default:
            return "info";
        }
      }
    }
  };
  </script>
  
  <style scoped lang="scss">
  .app-container.dark-mode {
    padding: 20px;
    background-color: #141414;
    min-height: 100vh;
  }
  
  /* 全局暗色表格样式 */
  .dark-table {
    --el-table-border-color: #434343;
    --el-table-border: 1px solid var(--el-table-border-color);
    --el-table-text-color: #e8e8e8;
    --el-table-header-text-color: #f0f0f0;
    --el-table-row-hover-bg-color: #2d2d2d;
    --el-table-current-row-bg-color: #2a2a2a;
    --el-table-header-bg-color: #1d1d1d;
    --el-table-bg-color: #141414;
    --el-table-tr-bg-color: #1a1a1a;
    --el-table-expanded-cell-bg-color: #1a1a1a;
    
    background-color: var(--el-table-bg-color);
    color: var(--el-table-text-color);
    
    /* 表头 */
    ::v-deep .el-table__header-wrapper {
      th {
        background-color: var(--el-table-header-bg-color);
        color: var(--el-table-header-text-color);
        font-weight: 600;
      }
      
      .el-table__column-filter-trigger {
        color: var(--el-table-header-text-color);
      }
    }
  
    /* 表格主体 */
    ::v-deep .el-table__body-wrapper {
      tr {
        background-color: var(--el-table-tr-bg-color);
        
        &:hover > td {
          background-color: var(--el-table-row-hover-bg-color) !important;
        }
        
        td {
          border-bottom: var(--el-table-border);
        }
      }
    }
  
    /* 边框线 */
    ::v-deep .el-table--border {
      border: var(--el-table-border);
      
      &::after, &::before {
        background-color: var(--el-table-border-color);
      }
    }
  
    /* 排序图标 */
    ::v-deep .caret-wrapper {
      .ascending {
        border-bottom-color: var(--el-table-header-text-color);
      }
      .descending {
        border-top-color: var(--el-table-header-text-color);
      }
    }
  
    /* 分页器（如果添加分页） */
    ::v-deep .el-pagination {
      color: var(--el-table-text-color);
      
      .btn-prev, .btn-next, .number {
        color: var(--el-table-text-color);
        background: var(--el-table-tr-bg-color);
        
        &:hover {
          color: #409EFF;
        }
      }
      
      .active {
        background-color: #2a2a2a;
      }
    }
  
    /* 标签样式 */
    ::v-deep .el-tag {
      color: #fff;
      border: none;
      
      &.el-tag--success {
        background-color: rgba(46, 125, 50, 0.8);
      }
      &.el-tag--warning {
        background-color: rgba(237, 108, 2, 0.8);
      }
      &.el-tag--danger {
        background-color: rgba(211, 47, 47, 0.8);
      }
      &.el-tag--info {
        background-color: rgba(144, 147, 153, 0.8);
      }
    }
  
    /* 筛选下拉菜单 */
    ::v-deep .el-table-filter {
      background-color: #1d1d1d;
      border: 1px solid #434343;
      
      .el-table-filter__list {
        color: var(--el-table-text-color);
      }
      
      .el-checkbox__label {
        color: var(--el-table-text-color);
      }
      
      .el-table-filter__bottom {
        border-top: 1px solid #434343;
      }
    }
  }
  </style>